<template>
    <div class="adviserTeacherList-container">
      <div class="perOffice">
        <div class="title">顾问使用教程</div>
        <div class="step-group">
          <div v-for="(item, index) in list" :key="index" style="font-size: 0;">
            <div class="step-left" v-if="index % 2 == 0">
              <span class="step-icon-group">
                <span class="step-icon"></span>
              </span>
              <span class="step-line"></span>
              <span class="step-text" @click="$router.push({path:'/perOffice/imgOrText/adviserTeacherDetail',query:{id:item.id}})">{{ item.title }}</span>
            </div>
            <div class="step-right" v-else>
              <span class="step-icon-group">
                <span class="step-icon"></span>
              </span>
              <span class="step-line"></span>
              <span class="step-text" @click="$router.push({path:'/perOffice/imgOrText/adviserTeacherDetail',query:{id:item.id}})">{{ item.title }}</span>
            </div>
          </div>
  
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        list:[]
      };
    },
    created() {
      this.initAjaxMethod();
    },
    methods: {
      initAjaxMethod() {
        const toast = this.$toast.loading("加载中...");
        this.$http
          .post(this.$API.SET_PEROFFICE_ADVISERTEACHERLIST, { id: this.id })
          .then((res) => {
            toast.clear();
            if (res.code == 1) {
              this.list = Array.isArray(res.data)?res.data:[];
            }
          });
      },
    }
  };
  </script>
  
  <style lang="less">
  .adviserTeacherList-container {
    padding:0 0.2rem;
    .title{
        font-size:0.3rem;
        color:#333;
        padding:0.2rem 0;
    }
    .step-group{
          padding:0.3rem;
          border-radius: 4px;
          background: #fff;
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
      }
      .step-left,.step-right{
          width: 50%;
          position: relative;
          font-size: 0;
      }
      .step-left{
          padding:0.2rem 0.84rem 0.2rem 0;
          border-right:1px solid #888;
          text-align: right;
          height: 0.7rem;
          font-size: 0;
      }
      .step-left .step-icon-group{
          position: absolute;
          top:50%;
          right: 0;
          width: 0.24rem;
          height:0.24rem ;
          border-radius: 50%;
          border:1px solid #888;
          transform: translate(50%,-50%);
          background: #EFEFF4;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .step-left .step-icon-group .step-icon{
          width: 0.16rem;
          height: 0.16rem;
          background: #f7a39a;
          display: inline-block;
          border-radius: 50%;
      }
      .step-left .step-line{
          position: absolute;
          top:50%;
          right: 0;
          width: 0.8rem;
          height: 1px;
          background: #888;
          transform: translateY(-50%);
      }
      .step-left .step-text{
          font-size:0.28rem;
          color:#0d8ddb;
      }
      .step-right{
          padding:0.2rem 0 0.2rem 0.84rem;
          margin-left:49.7%;
          border-left:1px solid #888;
          height: 0.7rem;
      }
      .step-right .step-icon-group{
          position: absolute;
          top:50%;
          left: 0;
          width: 0.24rem;
          height:0.24rem ;
          border-radius: 50%;
          border:1px solid #888;
          transform: translate(-50%,-50%);
          z-index: 4;
          background: #EFEFF4;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .step-right .step-icon-group .step-icon{
          width: 0.16rem;
          height: 0.16rem;
          background: #f7a39a;
          display: inline-block;
          border-radius: 50%;
      }
      .step-right .step-line{
          position: absolute;
          top:50%;
          left: 0;
          width: 0.8rem;
          height: 1px;
          background: #888;
          transform: translateY(-50%);
      }
      .step-right .step-text{
          font-size:0.28rem;
          color:#0d8ddb;
      }
  }
  </style>